﻿@model Gueei.Gallery.Web.ViewModels.ImageEditViewModel
@using Gueei.Gallery.Web.Extensions
@{
	View.Title = "Image: " + Model.Name;
	Layout = "~/Views/Shared/_MasterLayout.cshtml";
}
@section Script{
<script type="text/javascript">
	(function ($) {
		$.fn.imageTextFieldEditor = function (options) {
			var defaultOption = {};
			$.extend(defaultOption, options);

			function reset(form) {
				$("input, textarea, *[generated]", form).hide();
				$("input.editText, textarea.editText", form).each(function () {
					$("<p title='Edit this!' class='editText' for='" +
						$(this).attr("name") + "'></p>")
						.text(($(this).val().length == 0) ?
							"click to add" :
							$(this).val())
						.addClass(($(this).val().length == 0) ?
							"no-value" : "has-value")
						.appendTo($(this).parent())
						.click(function () {
							$("input, textarea", form).show();
							$("p.editText", form).hide();
						});
				});
			}

			$(this).each(function () {
				var form = $(this);
				$("p.editText", form).remove();
				reset(form);
				$("input:reset").click(function () {
					$("input, textarea, *[generated]", form).hide();
					$("p.editText", form).show();
				});
			});
			return this;
		};
	})(jQuery);
</script>
<script type="text/javascript">
	$(function () {
		(function ($) {
			var itemTemplate =
				"<li><a class='tag' href='/Browse/Tag/${Item}' title='Tag: ${Item}'>${Item}</a>" +
				"<a class='removeTag imageButton' data-item='${Item}'/>" +
				"</li>";

			$("a.removeTag").live("click", function (e) {
				$("form.editTags textarea").val(
					$("form.editTags textarea").val().replace($(this).data("item") + ",", "")
				);
				$(this).parents("form").submit();
				//alert($(this).data("item"));
			});

			$("form.editTags fieldset").hide();
			var rebuildTagList = function () {
				var tags = $("form.editTags textarea").val().split(/,\s*/);
				var tagHolder = $("form.editTags ul.tag-list").empty();
				$.each(tags, function (i, item) {
					if (item.trim().length != 0)
						tagHolder.append(itemTemplate.replace(/\${Item}/g, item));
				});
			};

			$("form.editTags fieldset.addTag").show();

			$("form.editTags").ajaxForm({
				beforeSerialize:
					function (form, options) {
						$("form.editTags textarea")
						.val($("form.editTags textarea").val() + "," + $(".addTagTextBox").val());
					},
				beforeSubmit:
					function (arr, form, options) {
						$("input, textarea", form).attr("disabled", true);
						$("form.editTags .autocomplete").autocomplete("disable");
					},
				success:
					function (response, status, xhr, form) {
						if (response.success) {
							$("form.editTags textarea").val(response.data.tagstring);
						}
						$("input, textarea", form).attr("disabled", false);
						rebuildTagList();
						$("form.editTags .autocomplete").autocomplete("enable");
						$(".addTagTextBox").val("").focus();
					}
			});

			$("form.editTags .autocomplete").autocomplete({
				source: "/Search/Tags",
				select: function (event, ui) { $("form.editTags").submit(); }
			});

			$("form.editTags fieldset.addTag").before("<ul class='tag-list'></ul>");
			rebuildTagList();

			// text editor replace
			$("form.editText").imageTextFieldEditor()
				.ajaxForm({
					beforeSubmit:
						function (arr, form, options) {
							$("input, textarea", form).attr("disabled", true);
						},
					success:
						function (response, status, xhr, form) {
							$("input.editText", form).each(function () {
								$(this).val(
									response.data[$(this).attr("name").toLowerCase()]);
							});
							$("textarea.editText", form).each(function () {
								$(this).html(
									response.data[$(this).attr("name").toLowerCase()]);
							});
							$("input, textarea", form).attr("disabled", false);
							$(form).imageTextFieldEditor();
						}
				});
			$("form.editImage").ajaxForm({
				beforeSubmit:
					function (arr, form, options) {
						$("input, textarea", form).attr("disabled", true);
						$(".imageContainer img").attr("src", "/images/loading.gif");
					},
				success:
					function (response, status, xhr, form) {
						$("input, textarea", form).attr("disabled", false);
						$(".imageContainer img").attr("src", response.data.url);
					}
			});
		})($);
	});
</script>
}
@section Sidebar{
@using (Html.BeginRouteForm("Edit", new { action = "name" }, FormMethod.Post, new { @class = "ajaxSubmit editText" }))
{
	<h2>
		Name</h2>
		<p>
			@Html.TextBoxFor(m => m.Name, new { @class = "editText" }) @Html.ValidationMessageFor(m => m.Name)
		</p>
		<input type="submit" value="Save" />
		<input type="reset" value="Cancel" />
}
<h2>
	Description</h2>
@using (Html.BeginRouteForm("Edit", new { action = "description" }, FormMethod.Post, new { @class = "ajaxSubmit editText" }))
{
	<p>
		@Html.TextAreaFor(m => m.Description, new { @class = "editText" })
	</p>
		<input type="submit" value="Save" />
		<input type="reset" value="Cancel" />
}
<h2>
	Rotate</h2>
@using (Html.BeginRouteForm("Edit", new { action = "rotate" }, FormMethod.Post, new { @class = "ajaxSubmit editImage" }))
{
	<input class="rotate-ccw" type="submit" name="param" value="RotateCCW" title="Rotate Counter Clockwise"/>
	<input class="rotate-cw" type="submit" name="param" value="RotateCW"  title="Rotate Clockwise"/>
}
@using (Html.BeginRouteForm("Edit", new { action = "tags" }, FormMethod.Post, new { @class = "editTags" }))
{
	<h2>
		Tags</h2>
	<fieldset class="allow-ajax">
		<p>
			@Html.Label("Tags", "Add Or Remove Tags") @Html.TextAreaFor(m => m.TagString, new { rows = 3, cols = 25, @class = "tags autocomplete" })
		</p>
		<input type="submit" value="Submit" name="command" />
	</fieldset>
	<fieldset class="addTag" style="display: none">
		<p>
			@Html.LabelFor(m => m.AddTag) @Html.TextBoxFor(m => m.AddTag, new { @class = "autocomplete tags addTagTextBox" })
			@Html.ValidationMessageFor(m => m.AddTag)
		</p>
		<input type="submit" value="Add" name="command" />
	</fieldset>
}
}
<div class='largeImagePreview'>
	<div class='imageContainer'>
		@Html.Image(Model)
	</div>
	<ul class="downloadImage">
		<li>@Html.DownloadImageLink("Get Original Image", Model,
						 Gueei.Gallery.Core.DisplayProfiles.DefaultProfileName.Fullsize) </li>
	</ul>
</div>
